<template>
    <div id="wrap">
      <h2 class="title">瀑布流vueWaterfallEasy</h2>
      <div class="btns">
        <button class="request" @click="request">重新请求数据</button>
        <button class="request" @click="del">删除1个数据</button>
      </div>
  
      <div id="container">
        <vue-waterfall-easy
          ref="waterfall"
          :imgsArr="imgsArr"
          :srcKey="'photoBigUrl'"
          @scrollReachBottom="getData"
          :maxCols="2"
          @click="clickFn"
          @imgError="imgErrorFn"
          :mobileGap="20"
          :reachBottomDistance="80"
        >
          <!-- 图片信息 -->
          <template #default="{ index, value }">
            <div class="img-info">
              <p class="some-info">第 {{ index + 1 }} 张</p>
              <p class="some-info">title: {{ value.posterTitle || value.posterCreator }}</p>
            </div>
          </template>
  
          <!-- 自定义结束文案 -->
          <template #waterfall-over>
            <div>没有更多数据了</div>
          </template>
        </vue-waterfall-easy>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, onBeforeMount } from 'vue'
  import vueWaterfallEasy from 'vue-waterfall-easy'
  import axios from 'axios'
  
  // 数据部分
  const SERVICEURL = ref('接口')
  const imgsArr = ref([])
  const subjectId = ref("3")
  const pageNumber = ref(1)
  const SIZE = ref(30)
  const requestFlag = ref(true)
  
  const waterfall = ref(null)
  
  // 生命周期：created
  onBeforeMount(() => {
    getData()
  })
  
  // 获取数据
  function getData(n) {
    if (!requestFlag.value) {
      waterfall.value?.waterfallOver()
      return
    }
  
    const _param = {
      pageNumber: pageNumber.value,
      pageSize: SIZE.value,
      posterCreator: "",
      subjectId: subjectId.value,
      type: 1
    }
  
    axios.post(SERVICEURL.value, _param).then(res => {
      console.log(res)
      const result = res.data
  
      if (!result || result.code !== 10000) {
        throw new Error('请求结果错误')
      }
  
      const _data = result.result
  
      if (!_data.length) {
        requestFlag.value = false
        waterfall.value?.waterfallOver()
        return
      }
  
      if (_data.length < SIZE.value) {
        requestFlag.value = false
      }
  
      if (n === 2) {
        imgsArr.value = _data
      } else {
        imgsArr.value = [...imgsArr.value, ..._data]
      }
  
      pageNumber.value++
    }).catch(err => {
      console.error(err)
    })
  }
  
  // 删除一个数据
  function del() {
    imgsArr.value.splice(1, 1)
  }
  
  // 重新请求数据
  function request() {
    pageNumber.value = 1
    subjectId.value = "25"
    getData(2)
  }
  
  // 点击图片回调
  function clickFn(event, { index, value }) {
    if (event.target.tagName.toLowerCase() === "img") {
      console.log("img clicked", index, value)
    }
  }
  
  // 图片加载失败回调
  function imgErrorFn(imgItem) {
    console.log("图片加载错误", imgItem)
  }
  </script>
  
  <style scoped>
  .title {
    color: #fff;
    font-size: 0.3rem;
    text-align: center;
    line-height: 0.8rem;
    background: #000;
  }
  
  #container {
    width: 100%;
    position: absolute;
    top: 0.8rem;
    bottom: 0.5rem;
    background: #f1f1f1;
    font-size: 0.26rem;
  }
  
  .btns {
    width: 100%;
    height: 0.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .request {
    padding: 0 0.1rem;
    line-height: 0.4rem;
    border-radius: 0.3rem;
    background: #fff;
    color: #333;
  }
  
  .img-info {
    padding: 0.1rem;
  }
  </style>